<template>
	<view class="form-container-box">
		<!-- 待用活动表单 -->
		<active-form :formDate="formDate" @choose-image-btn="chooseImage" @delete-img-btn="deleteImg"  @sure-btn="sure" @input-val="inputVal">								
		</active-form>
		<!-- (对必填项input框为空是提示的和错误两种不同提示) -->
		<view class="buttonBox" @click="submit1">
			提交
		</view>
		<!-- (对必填项input框为为空和错误是一种提示) -->
		<!-- <view class="buttonBox" @click="submit2">
			提交2
		</view> -->		
		<cover-view class="submit-data">
			{{submitData}}
		</cover-view>
		
	</view>
</template>

<script>
	import activeForm from './../../components/active_form.vue';
	export default {	
		data() {
			return {
				submitData: "",								
				formDate: [
					{
						placeholder: "请选择",
						label: "兴趣爱好",
						type: "radio",
						selectVal: ["吃鸡", 0, "吃鹅", "吃兔", "吃鸟", "吃素"],
						rules: {
							name: "interest",
							value: "",
							verify: "req",
							errMess: "请选择兴趣爱好"
						}
					},
					{
						placeholder: "姓名，2-20个汉字，中间允许包含一个“.”",
						label: "姓名",
						type: "text",
						rules: {
							name: "realName",
							value: "",
							verify: "req|realName",
							errMess: "姓名填写不正确",

						}

					},
										
					{
						placeholder: "请选择",
						label: "性别",
						type: "radio",
						selectVal: ["男", "女", "人妖"],
						rules: {
							name: "sex",
							value: "",
							verify: "",
							errMess: "请选择性别"
						}
					},
					{
						label: "身份证正面",
						type: "image",
						updateImg:false,//默认只显示上传按钮
						rules: {
							name: "idBefore",
							value: "",
							verify: "req",
							errMess: "请上传身份证正面"
						}
					},
					{
						label: "身份证反面",
						type: "image",
						updateImg:false,//默认只显示上传按钮
						rules: {
							name: "idAfter",
							value: "",
							verify: "req",
							errMess: "请上传身份证反面"
						}
					},
					{
						placeholder: "8-20个字符，至少1个大写字母，1个小写字母和1个数字",
						label: "密码",
						type: "password",
						rules: {
							name: "pwd",
							value: "",
							verify: "req|pwd",
							errMess: "密码格式不正确"
						}

					},
					{
						placeholder: "8-20个字符，至少1个大写字母，1个小写字母和1个数字",
						label: "确认密码",
						type: "password",
						rules: {
							name: "qpwd",
							value: "",
							verify: "req|same",
							errMess: "两次密码不一致"
						}

					},
					{
						placeholder: "请输入11位手机号",
						label: "手机号",
						type: "number",
						rules: {
							name: "phone",
							value: "",
							verify: "req|phone",
							errMess: "手机号填写不正确"
						}
					},
					{
						placeholder: "请输入6位数的验证码",
						label: "验证码",
						type: "number",
						rules: {
							name: "yzm",
							value: "",
							verify: "req|num6",
							errMess: "验证码填写不正确"
						}

					},
					
					{
						placeholder: "请输入QQ",
						label: "QQ",
						type: "number",
						rules: {
							name: "qq",
							value: "",
							verify: "qq",
							errMess: "qq号输入不正确"
						}

					},
					{
						placeholder: "请介绍一下自己",
						label: "自我介绍",
						type: "textarea",
						rules: {
							name: "introduce",
							value: "",
							verify: "req",
							errMess: "请输入自我介绍"
						}
					},
				]
			}
		},
		components:{
			activeForm
		},
		methods: {
			submit1: function() {
				// 表单验证 可选项 otherPra:otherPra	 
				var otherPra = {
					reqEmptyVal: true,
				}
				if (this.$vervify({
						formDate: this.formDate,
						otherPra: otherPra
					})) {
					uni.showToast({
						title: "验证通过",
						duration: 2000,
						icon: "none"
					});
					// 表单序列化
					this.submitData = "序列化数组：" + JSON.stringify(this.$submitForm(this.formDate))
					console.log(this.$submitForm(this.formDate))
				}
			},
			submit2: function() {
				// 表单验证 非必传otherPra:otherPra	 			
				if (this.$vervify({
						formDate: this.formDate
					})) {
					uni.showToast({
						title: "验证通过",
						duration: 2000,
						icon: "none"
					});
					// 表单序列化
					this.submitData = "序列化数组：" + JSON.stringify(this.$submitForm(this.formDate))
					console.log(this.$submitForm(this.formDate))
				}
			},			
			// 上传图片
			chooseImage: function(data) {		
				var data=JSON.parse(data)					
				this.formDate[data.index].rules.value=data.value;
				this.formDate[data.index].updateImg=true;
			},
			// 删除图片
			deleteImg:function(index){
				this.formDate[index].rules.value="";
				this.formDate[index].updateImg=false;
			},
			// 确定
			sure: function(data) {	
				var data=JSON.parse(data);
				if (String(data.currentSelectIndex) != "" && String(data.currentSelectValue) != "") {				
					this.formDate[data.currentSelectIndex].rules.value = data.currentSelectValue;
				}
			},
			// inputVal
			inputVal:function(data){
				var data=JSON.parse(data);
				if (String(data.val) != "" && String(data.index) != "") {				
					this.formDate[data.index].rules.value = data.val;
				}
			}

		}
	}
</script>

<style lang="scss">
	.form-container-box{
		width: 100vw;
		font-size: 28upx;
		min-height: 100vh;
		position: relative;
		padding-bottom: 100upx;
	}
	.bgfff {
		
	}
	  
	.buttonBox {
		width: 100%;			
		height: 84upx;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ff5b01;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}
	.submit-data {
		padding: 20upx;
		margin-top: 20upx;
		word-break: break-word;
	}
	
</style>
